<template>
	<div class="uiue-card" style="padding-top: 0">
		<a-tabs v-model:activeKey="configKey" class="tabss" @change="configHandleChange">
			<a-tab-pane v-for="v in configData" :key="v.key" :tab="v.txt"></a-tab-pane>
		</a-tabs>
		<div class="tit" style="margin-top: 10px">配置信息</div>
		<PcConfig v-if="configKey == '1'" />
		<AppConfig v-if="configKey == '2'" />
		<AndroidConfig v-if="configKey == '3'" />
		<IosConfig v-if="configKey == '4'" />
		<UmapConfig v-if="configKey == '5'" />
		<AppConfig v-if="configKey == '6'" />
	</div>
	<!-- <template v-if="showTable"> -->
	<!-- 0灰名单   1黑名单   2白名单 -->
	<!-- 灰度名单 -->
	<!-- <GrayscaleTable v-if="configKey == '1' && tableName?.includes('PC')" :configKey="configKey" :isblack="'0'" /> -->
	<!-- <GrayscaleTable v-if="configKey !== '1'" :configKey="configKey" :isblack="'0'" /> -->
	<!-- 黑名单 -->
	<!-- <GrayscaleTable v-if="configKey !== '1'" :configKey="configKey" :isblack="'1'" /> -->
	<!-- </template> -->
	<!-- 白名单 -->
	<!-- <GrayscaleTable v-if="showWhite" :configKey="configKey" :isblack="'2'" /> -->
</template>

<script setup name="Configure">
import PcConfig from './pcConfig.vue'
import AppConfig from './appConfig.vue'
import AndroidConfig from './androidConfig.vue'
import IosConfig from './iosConfig.vue'
import UmapConfig from './UmapConfig.vue'
import tool from '@/utils/tool'
import sysConfig from '@/config/index'
import { useRoute } from 'vue-router'
const route = useRoute()
const { tableName } = route.query
const props = defineProps({
	showTable: Boolean,
	appAccess: Array
})

const datas = inject('detailDate')

const currentName = inject('currentName')

// 控制黑名单
const showBlack = computed(() => {
	let bool = false
	if (currentName?.value === '申请人提交生产材料') {
		bool = true
	}
	return bool
})
watch(
	currentName,
	(newData, oldData) => {
		if (newData === '运营组审核' && tableName && tableName.includes('APP')) {
			const { param = '' } = datas.value.appPropertiesList[0]
			tool.session.set('param', param)
		}
	},
	{ immediate: true }
)

// const config = [
// 	{ txt: '门户Html', key: '1', type: 'pcPropertiesList', oid: 'PC' },
// 	{ txt: '移动端Html', key: '2', type: 'appPropertiesList', oid: 'APP' },
// 	{ txt: 'Android', key: '3', type: 'androidPropertiesList', oid: 'ANDROID' },
// 	{ txt: 'IOS', key: '4', type: 'iosPropertiesList', oid: 'IOS' },
// 	{ txt: '移动端UMAP', key: '5', type: 'umapPropertiesList', oid: 'UMAP' }
// ]
const config = sysConfig.DEVICE_CONFIG
// 控制白名单显示
const showWhite = computed(() => {
	let bool = false
	// 如果是审批详情
	if (tableName) {
		// 找到对应的子表
		const obj = config.find((v) => tableName.includes(v.oid))
		// console.log(obj)
		// console.log(datas.value[obj.type][0])
		// 只有单端移动并且权限为白名单的时候
		if (datas.value[obj.type][0]?.permission === '1' && !props.appAccess.includes('1')) {
			bool = true
		}
	}
	return bool
})
const configData = computed(() => {
	let arr = []
	if (tableName) {
		// 审批详情
		arr = config.filter((v) => tableName.includes(v.oid))
	} else {
		// 我的应用详情
		arr = config.filter((v) => datas.value.appAccess.includes(v.key))
	}
	return arr
})
// const configData = ref(config)
const configKey = ref(configData.value[0].key)
const configHandleChange = (i) => {
	configKey.value = i

}
</script>

<style lang="less" scoped></style>
